<template>
    <div @click="showList">
        <slot>
            <el-input
                :model-value="table.selectedRows[0]?.title"
                readonly
                placeholder="请选择商品"
                style="width: auto"
                :disabled="disabled"
            >
                <template #append>
                    <el-button icon="Search" type="primary" :disabled="disabled" />
                </template>
            </el-input>
        </slot>
    </div>


    <mi-dialog v-model="dialogShow" title="选择商品">

        <el-form :model="search.info" ref="searchRef" :inline="true" label-width="68px"  class="mb10">

            <el-form-item label="商品名称" prop="title">
                <mi-input v-model="search.info.title" placeholder="商品名称关键词"/>
            </el-form-item>
            <el-form-item label="商品分类" prop="cate_id">
                <goods-cate-select v-model="search.info.cate_id" first="all" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="Search" @click="search.submit()">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-table class="mb10"
                  :data="table.data"
                  style="width: 100%"
                  max-height="50vh"
                  highlight-current-row
                  @current-change="tableCurrentChange"
                  @selection-change="selectionChange"
        >

            <el-table-column type="selection" width="55"  v-if="multiple" />

            <el-table-column prop="id" label="ID" :width="tdWidth.id" />
            <el-table-column prop="image" label="图片" :min-width="tdWidth.title">
                <template #default="{row}">
                    <mi-image :src="row.image" :width="48"></mi-image>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="商品名称" :min-width="tdWidth.title" />
        </el-table>

        <el-pagination
            background
            layout="prev, pager, next"
            v-model:page-size="table.limit"
            v-model:current-page="table.page"
            :total="table.total" />

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="confirm">确认</el-button>
                <el-button @click="dialogShow = false">取消</el-button>
            </div>
        </template>

    </mi-dialog>

</template>

<script setup lang="ts">
import {computed, onBeforeMount, onMounted, reactive, Ref, ref, watch} from "vue";
import global from "@/dict/global";
import {getGoodsDetail, getGoodsList, getGoodsPaginate} from "@/api/store/goods";
import GoodsCateSelect from "@/views/store/components/GoodsCateSelect.vue";
import {simpleGet} from "@/utils/request";

const tdWidth = global.tdWidth

const props = withDefaults(defineProps<{
    modelValue?: number|number[],
    disabled?:boolean,
    multiple? : boolean,
}>(), {
    disabled:false,
    multiple:false,
})
const emits = defineEmits(['update:modelValue', 'change'])
const value_c = computed({
    get:(): any => {
        return props.modelValue
    },
    set:(val:number|number[]) => {
        emits("update:modelValue", val)
    }
})
const dialogShow = ref(false)
const page = ref(1)
const table  : Record<string, any> = reactive({
    where:{},
    data:[],
    page:1,
    limit:10,
    total:0,
    loading:true,
    selectedRows:[],
})

const search : any = reactive({
    info:{},
    submit:() => {
        // 添加查询条件
        table.where = Object.assign(table.where, search.info)
        table.page = 1
        searchRequest()
    },
})

const showList = () => {
    dialogShow.value = true
    searchRequest()
}

const searchRequest = () => {
    getGoodsPaginate({where:table.where, page: table.page, limit:table.limit}).then((res:any) => {
        table.data = res.items
        table.total = res.total
    })

}

const tableCurrentChange = (row:any) => {
    value_c.value = row.id
    table.selectedRows = [row]
}

const selectionChange = (val: any[]) => {
    value_c.value = val.map((item:any) => item.id)
    table.selectedRows = val
}

const confirm = () => {
    emits('change', table.selectedRows)
    // 关闭
    dialogShow.value = false
}

watch(() => table.page, (nv,ov) => {
    if (nv!=ov){
        searchRequest()
    }
})

onMounted(() => {
    if (props.modelValue){
        const ids = props.multiple ?  props.modelValue : [props.modelValue]
        getGoodsList({goods_ids:ids}).then((res:any)=>{
            table.selectedRows = res.items
        })
    }

})

</script>

<style scoped>


</style>
